import { CloudDownloadOutlined, InboxOutlined } from '@ant-design/icons';
import { Button, Col, message, Row, Upload } from 'antd';
const { Dragger } = Upload;
const BatchAdd = (props) => {
  const { addSuccess } = props;
  const uploadProps = {
    name: 'file',
    multiple: false,
    accept: '.xlsx',
    action: '/api/batchCreateUser',
    headers: {
      'X-Requested-With': null,
    },
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`批量新增成功`);
        addSuccess();
      } else if (status === 'error') {
        message.error(`批量新增失败`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };
  return (
    <>
      <div>
        <Row>
          <Col span={6}>
            <Button
              type="primary"
              size="large"
              onClick={() => {
                window.location.href =
                  window.origin + `/upload/batchCreateUser.xlsx`;
              }}
            >
              <CloudDownloadOutlined />
              下载模板
            </Button>
          </Col>
          <Col span={18}>
            <p style={{ fontSize: 10, margin: '20px 0 10px 10px' }}>
              批量导入信息项需要下载模板,填写正确信息后上传文件
            </p>
          </Col>
        </Row>
      </div>
      <Dragger {...uploadProps}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">请将文件拖入指定区域，完成上传</p>
      </Dragger>
    </>
  );
};

export default BatchAdd;
